<template>
  <h3>{{number}}</h3>
  <button @click="number++">加一</button>

  <h3>{{obj.age}}岁</h3>
  <button @click="obj.age++">加一岁</button>

   <h3>{{obj.sister.age}}岁</h3>
  <button @click="obj.sister.age++">加岁</button>
</template>

<script>
import {reactive, ref,watch} from 'vue'
export default {  
  setup(){
    // 情况1: 使用 ref 监听简单数据类型
    // const number = ref(0)
    // watch(number,(newval,oldval)=>{
    //   console.log(newval,oldval);
    // })
    // return {number}
    //  情况2: 使用 reactive 监听复杂数据类型
    // const obj = reactive({
    //   name:'tom',
    //   age:10
    // })

    // watch(obj,(newval)=>{
    //   console.log('obj发生了改变',newval);
    // })

    // return {obj}
    // 情况3:使用 reactive 定义对象响应式数据，监听单个属性
    const obj = reactive({
      name:'tom',
      age:10,
      sister:{
        name:"jack",
        age:20
      }
    })

    watch(obj.sister,(newval)=>{
      console.log('obj发生了改变',newval);
    })

    // watch(obj.age,(newval)=>{
    //   console.log('obj发生了改变',newval);
    // })

    watch(()=>obj.age,(newval)=>{
      console.log('obj发生了改变',newval);
    })

    return {obj}
  }
}
</script>

<style>

</style>